<template>
	<view class="all_evaluation">
		<view class="all_evaluation_tab">
			<text v-for="item in tabs" :key="item?.text" @click="handleClickTab(item)"
				:class="{select:item?.text === selectTab}">{{item?.text}}({{item?.num}})</text>
		</view>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			@refresherrefresh="onRefresh" :refresher-threshold="50" @scrolltolower="scrolltolower"
			class="all_evaluation_scroll" v-if="dataSouse.length">
			<view class="all_evaluation_card" v-for="item in dataSouse" :key="item?.id">
				<view class="all_evaluation_card_header">
					<image :src="item?.avatar" class="all_evaluation_card_header_left"></image>
					<view class="all_evaluation_card_header_right">
						<view class="all_evaluation_card_header_right_top">
							<text>{{item?.evaluateUserNickname}}</text>
							<u-rate :count="5" active-color="#FF943C" readonly v-model="item.evaluateScore"></u-rate>
						</view>
						<view class="all_evaluation_card_header_right_btm">{{item?.fromToday}}</view>
					</view>
				</view>
				<view class="all_evaluation_card_content">
					{{item?.evaluateContent}}
				</view>
				<view class="all_evaluation_card_imgs" v-if="item?.evaluatePhotos">
					<image :src="url" v-for="(url,i) in item?.evaluatePhotos?.split(',')"
						@click="handlePreview(item?.evaluatePhotos?.split(','),i)">
					</image>
				</view>
			</view>
			<u-loadmore :status="status" @loadmore="scrolltolower" v-if="status !== 'nomore'"></u-loadmore>
		</scroll-view>
		<u-empty v-else marginTop="100" text="暂无评论～"
			icon="http://qianxueapplet.suoeryun.com/zupj.png"></u-empty>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, unref } from 'vue';
	import { qxGoodsEvaluateList, queryEvaluateLevelNum } from '@/config/goodStuff.api';
	import { onLoad } from '@dcloudio/uni-app';

	const tabs = ref([{ text: '全部', num: 0 }, { text: '好评', num: 0 }, { text: '中评', num: 0 }, { text: '差评', num: 0 }]);
	const selectTab = ref('全部');
	const dataSouse = ref([]);
	const triggered = ref(false);
	const scrollTop = ref(0);
	const status = ref('loadmore');
	const pagination = reactive({ pageNo: 1, total: 0, pageSize: 10 });

	const goodsId = ref('');

	onLoad(async (params) => {
		goodsId.value = params?.id;
		const res = await queryEvaluateLevelNum({ goodsId: params?.id });
		tabs.value[0].num = res?.total;
		tabs.value[1].num = res?.high;
		tabs.value[2].num = res?.middle;
		tabs.value[3].num = res?.low;
		loadData();
	})

	/**
	 * 点击tab
	 */
	function handleClickTab(item) {
		selectTab.value = item?.text;
		pagination.pageNo = 1;
		loadData();
	}

	/**
	 * 图片预览
	 */
	function handlePreview(urls, i) {
		uni.previewImage({
			urls,
			count: i
		})
	}

	/**
	 * 加载数据
	 */
	async function loadData() {
		if (pagination.pageNo === 1) {
			dataSouse.value = [];
		}
		status.value = 'loading';
		const res = await qxGoodsEvaluateList({ ...pagination, goodsId: unref(goodsId), evaluateLevel: unref(selectTab) === '全部' ? '' : unref(selectTab) });
		triggered.value = false;
		pagination.total = res?.total;
		dataSouse.value?.push(...res?.records);
		if (unref(dataSouse)?.length < pagination.total) {
			status.value = 'loadmore';
		} else {
			status.value = 'nomore';
		}
	}

	/**
	 * 滚动到底部操作
	 */
	function scrolltolower() {
		if (unref(dataSouse)?.length < pagination.total && (unref(dataSouse)?.length / pagination.pageSize == pagination.pageNo)) {
			pagination.pageNo++;
			loadData();
		}
	}

	/**
	 * 自定义下拉刷新被触发
	 */
	function onRefresh() {
		triggered.value = true;
		pagination.pageNo = 1;
		loadData();
	}
</script>

<style lang="scss" scoped>
	.all_evaluation {
		padding: 24rpx;

		.all_evaluation_tab {
			text {
				padding: 10rpx 20rpx;
				border-radius: 200rpx;
				margin-right: 20rpx;
				font-size: 28rpx;
				background-color: #fff;

				&.select {
					background-color: #FF943C;
					color: #fff;
				}

				&:last-child {
					margin-right: 0;
				}
			}
		}

		.all_evaluation_scroll {
			height: calc(100vh - 48rpx - 28rpx - 5rpx);
		}

		.all_evaluation_card {
			margin-top: 24rpx;
			padding: 24rpx;
			border-radius: 12rpx;
			background-color: #fff;

			.all_evaluation_card_header {
				display: flex;

				.all_evaluation_card_header_left {
					width: 92rpx;
					height: 92rpx;
					margin-right: 24rpx;
					border-radius: 50%;
				}

				.all_evaluation_card_header_right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.all_evaluation_card_header_right_top {
						display: flex;
						justify-content: space-between;
						font-size: 32rpx;
						font-weight: 500;
					}

					.all_evaluation_card_header_right_btm {
						font-size: 28rpx;
						color: #9AAFBC;
					}
				}
			}

			.all_evaluation_card_content {
				padding-top: 24rpx;
				font-size: 28rpx;
				line-height: 40rpx;
			}

			.all_evaluation_card_imgs {
				padding-top: 24rpx;
				margin-right: -24rpx;

				image {
					width: 200rpx;
					height: 198rpx;
					margin-right: 24rpx;
					border-radius: 12rpx;
					margin-bottom: 10rpx;
				}
			}

		}
	}
</style>